<!-- 模板部分，定义更换壁纸容器和弹窗组件 -->
<template>
  <!-- 点击容器时显示更换壁纸弹窗 -->
  <div class="change-bg-container" @click="showDialog = true">
    <!-- 容器内容 -->
    <div class="content">
      <!-- 图标区域 -->
      <div class="icon"></div>
      <!-- 提示文本 -->
      <p class="tip">点击更换壁纸</p>
    </div>
  </div>

  <!-- 引入更换壁纸弹窗组件，使用 v-model 绑定显示状态 -->
  <changeBgDialog v-model="showDialog" />
</template>

<!-- 脚本部分，使用 TypeScript 和 setup 语法 -->
<script lang="ts" setup>
// 从 Vue 导入 ref 函数，用于创建响应式变量
import { ref } from 'vue';
// 导入更换壁纸弹窗组件
import changeBgDialog from './change-bg-dialog.vue';

// 创建响应式变量，控制弹窗的显示与隐藏
const showDialog = ref<boolean>(false);
</script>

<!-- 样式部分，使用 SCSS 并设置作用域 -->
<style lang="scss" scoped>
// 更换壁纸容器样式
.change-bg-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;

  // 容器内容样式
  .content {
    text-align: center;
    /* cursor: pointer; */
    padding: 24px 32px;
    transition: all 0.3s ease;

    // 图标样式
    .icon {
      width: 80px;
      height: 80px;
      margin: 0 auto 16px;
      background: url('@/assets/image-placeholder.svg') no-repeat center;
      background-size: contain;
    }

    // 提示文本样式
    .tip {
      font-size: 18px;
      color: #2c3e50;
      font-weight: 500;
      margin: 0;
    }
  }
}
</style>